<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>欢迎使用图书管理系统</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<!-- <link rel="stylesheet" href="../css/style2.css"> -->
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<script type="text/javascript" src="../js/verify.js"></script>
		<!-- 引入样式 -->
		<!--		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
		<!-- 引入组件库 -->
		<!--		<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.el-menu {
				border: none;
				border-right-width: 0;
			}

			.el-button {
				border: none;
				margin-left: 10px;
				font-size: 18px;
				color: white;
			}

			.buttonColor {
				background-color: rgb(32, 155, 159);
			}

			.buttonColor:hover {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor:focus {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor2:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.varify-input-code {
				margin-left: 36px;
				height: 40px;
			}

			a {
				text-decoration: none;
			}
		</style>
		<style>
			video {
				position: fixed;
				right: 0;
				bottom: 0;
				min-width: 100%;
				min-height: 100%;
				width: auto;
				height: auto;
				z-index: -9999;
				/*灰色调*/
				/* -webkit-filter: grayscale(100%) */
			}
		</style>
	</head>

	<body>
		<div>
			<video id="v1" autoplay muted loop style="width: 100%">
				<source  src="video/video.mp4">
			</video>
			<div style="float: right;"><a href="pages/author.html">作者：陈富乐~</a></div>
			<center>
				<br/><br/>
				<h1>欢迎使用图书管理系统</h1>
			</center>
			<div id="app">
				<div class="homepage-hero-module">
					<div class="video-container">
						<div :style="fixStyle" class="filter">
							<div style="width: 400px; margin: 60px auto;">
								<el-form ref="form" :model="form" size="normal" :rules="rules">
									<el-form-item prop="username">
										<el-input prefix-icon="el-icon-edit" v-model="form.username" placeholder="请输入账号"></el-input>
									</el-form-item>
									<el-form-item prop="password">
										<el-input prefix-icon="el-icon-edit" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
									</el-form-item>
									<div style="display: flex">
										<!-- <el-input prefix-icon="el-icon-key" v-model="form.validCode" style="width: 50%;" placeholder="请输入验证码"></el-input>
											-->
										<div id="mpanel3">
										</div>
									</div>
									<el-form-item>

									</el-form-item>
									<el-form-item>
										<el-button style="width: 100%; margin-left: 0px;" id="check-btn2" type="primary" @click="text()">登 录</el-button>
									</el-form-item>
									<el-form-item>
										<el-button style="float: left; font-size: 18px;" type="text" @click="toRegister">前往注册 >> </el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				fixStyle: '',
				form: {},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ],
				},
			},

			//钩子函数，VUE对象初始化完成后自动执行
			created() {},

			methods: {
				// 手动跳转到注册界面
				toRegister() {
					window.location.href = "pages/register.html"
				},
				// 接收验证码组件提交的 4位验证码
				createValidCode(data) {
					this.validCode = data
				},
				text(){
					// 底部jq验证之后调用login方法
				},
				login() {
					axios.get("/login/" + this.form.username + "&" + this.form.password).then(res => {
						console.log(res);
						if (res.data.code == 20061) {
							this.$message.success("用户登录成功！即将自动跳转！");
							let timer = setTimeout(() => {
								//需要定时执行的代码
								window.location.href = "pages/required.html";
							}, 1000)
						} else if (res.data.code == 20062) {
							this.$message.success("管理员登录成功！即将自动跳转！");
							let timer = setTimeout(() => {
								//需要定时执行的代码
								window.location.href = "pages/statistics.html";
							}, 2000)
						} else if (res.data.code == 20060) {
							this.$message.error(res.data.msg);
							let timer = setTimeout(() => {
								//需要定时执行的代码
								window.location.href = "index.html";
							}, 1000);
						} else {
							this.$message.error(res.data.msg);
							let timer = setTimeout(() => {
								//需要定时执行的代码
								window.location.href = "index.html";
							}, 2000)
						}
					})
				},
			}
		});
	</script>
	<script type="text/javascript">
		$('#mpanel3').ready().codeVerify({
			type: 2,
			figure: 10, //位数，仅在type=2时生效
			arith: 0, //算法，支持加减乘，不填为随机，仅在type=2时生效
			width: '200px',
			height: '40px',
			fontSize: '30px',
			btnId: 'check-btn2',
			ready: function() {},
			success: function() {
				vue.login();
				// alert('验证匹配！');
				//window.location.href="./pages/main.html";
			},
			error: function() {
				localStorage.setItem("dss", "dss");
				alert('验证码不匹配！,请重新填写!!!');
				window.location.href = "index.html";
			}
		});
	</script>

</html>